<template>
  <div class="song-container">
    <div class="top">
      <span class="icon-xiangxiajiantou iconfont" @click="move"></span>
      <div class="author-song">
        <div class="song">{{ songInfo?.name }}</div>
        <div class="author">
          <div v-for="item in songInfo?.ar">{{ item?.name }}</div>
        </div>
      </div>
      <span class="icon-fenxiang iconfont"></span>
    </div>
    <div class="pic">
      <div class="bg"></div>
      <img :src="songInfo?.al?.picUrl" alt="">
    </div>
    <div class="bottom">
      <div class="use">
        <span class="icon-aixin iconfont"></span>
        <span class="icon-xiazai iconfont"></span>
        <span class="icon-song iconfont"></span>
        <span class="icon-jianyi iconfont"></span>
        <span class="icon-Androidgengduo_o iconfont"></span>
      </div>
      <div class="play-bar">
        <MusicPlaybackProgressBar></MusicPlaybackProgressBar>
      </div>
      <div class="use">
        <span class="icon-xunhuan iconfont"></span>
        <span class="icon-shangyishoushangyige iconfont" @click="previousSong"></span>
        <!--  todo
              和播放组件互通，按钮切换
              上下首播放
        -->
        <div @click="methods.playAudio">
          <span class="icon-yunhang iconfont size" v-if="!isPlay"></span>
          <span class="icon-zanting iconfont size" v-else></span>
        </div>
        <span class="icon-xiayigexiayishou iconfont" @click="nextSong"></span>
        <span class="icon-gengduo iconfont"></span>
      </div>
    </div>

  </div>
</template>


<script setup>
import {useStore} from "vuex";
import {computed, onMounted} from "vue";
import MusicPlaybackProgressBar from '../MusicPlaybackProgressBar.vue'
import methods from "../../utils/methods.js";

const store = useStore();
const isPlay = computed(() => store.state.index.isPlay)
const songInfo = computed(() => store.state.index.songInfo);

// 移动
const move = () => {
  let container = document.querySelector(".song-container");
  container.style.transition = 'top .3s';
  container.style.top = "100%";
}
// 上一首
const previousSong = () => {
  if (store.state.index.songList.indexOf(store.state.index.songInfo) == 0) {
    store.dispatch("changeSong", store.state.index.songList[store.state.index.songList.length - 1])
  }
  store.dispatch("changeSong", store.state.index.songList[store.state.index.songList.indexOf(store.state.index.songInfo) - 1]);
  store.commit("setIsPlay", !isPlay.value);
  methods.playAudio();
}
// 下一首
const nextSong = () => {
  if (store.state.index.songList.indexOf(store.state.index.songInfo) == store.state.index.songList.length - 1) {
    store.dispatch("changeSong", store.state.index.songList[0])
    return;
  }
  store.dispatch("changeSong", store.state.index.songList[store.state.index.songList.indexOf(store.state.index.songInfo) + 1])
  store.commit("setIsPlay", !isPlay.value);
  methods.playAudio();
}
// touchstart 手指按到屏幕上
// touchmove 手指在屏幕上滑动
// touchend 手指离开屏幕
// touchcancle 特殊情况下关闭/退出时触发

onMounted(() => {
  let container = document.querySelector(".song-container");
  container.style.transition = 'top .3s';
  container.addEventListener('touchstart', (e) => {
        container.style.transition = '';
        let clickY = e.changedTouches[0].screenY;
        let top = container.offsetTop;
        container.addEventListener('touchmove', (e) => {
          if (clickY > e.changedTouches[0].screenY)
            container.style.top = '0';
          else
            container.style.top = top - clickY + e.changedTouches[0].screenY + 'px';
        })
      }
      ,
      false
  );
  container.addEventListener("touchend", () => {
    if (parseInt(container.style.top) > 100) {
      container.style.transition = 'top .3s';
      container.style.top = '150%'
    } else if (parseInt(container.style.top) > 0) {
      container.style.top = '0'
    }
  })
})
</script>


<style scoped lang="scss">
.song-container {
  background: rgba(223, 223, 223);
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 150%;
  z-index: 999;

  .top {
    padding: 10px 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    .iconfont {
      font-size: 20px;
    }

    .author-song {
      width: 250px;
      text-align: center;

      .author {
        overflow: hidden; /*内容溢出隐藏*/
        text-overflow: ellipsis; //*溢出的文本显示为...*/
        display: -webkit-box; /*将div转换为盒子模型*/
        -webkit-line-clamp: 1; /*设置div的文本为2行*/
        -webkit-box-orient: vertical; /*从顶部向底部垂直布置子元素*/
        font-size: 13px;
        color: #333;
      }
    }
  }

  .pic {
    position: relative;
    margin-top: 15vh;

    img {
      position: absolute;
      display: block;
      width: 50vw;
      height: 50vw;
      margin-left: 25vw;
      margin-top: 10vw;
      border-radius: 50%;
    }

    .bg {
      position: absolute;
      width: 70vw;
      height: 70vw;
      border-radius: 50%;
      margin-left: 15vw;
      background: #000;
    }
  }

  .bottom {
    width: 100%;
    position: absolute;
    bottom: 10px;

    .use {
      margin: 10px 0;
      padding: 0px 20px;
      display: flex;
      align-items: center;

      .iconfont {
        flex: 1;
        text-align: center;
        font-size: 24px;
      }

      .size {
        font-size: 50px;
      }
    }
  }
}
</style>
